﻿
/*#region Bandeaux*/

#milieu > #bandeaux {
	background-image:url("/images/histoire/his-ban-01_banniere_h550px.png");
}
	#milieu > #bandeaux .textes {
		display:block;
		padding:4.5% 0 0 6.8%; /* haut / droite / bas / gauche */
		text-align:left;
		vertical-align:middle;
	}

	#milieu > #bandeaux .textes p {
		margin:0px; padding:0px;
		font-weight:400; color:white;
	}

	#milieu > #bandeaux .textes p.titre {
		position:relative;
		margin:0 0 0.11em 0;
		font-family:Anton; font-size:5rem; color:#1D3FA0; letter-spacing:5px;
		text-shadow:3px 3px 0px #C3D0E1;
		text-transform:uppercase;
	}
		#milieu > #bandeaux .textes p.titre > span {
			font-size:inherit; font-weight:inherit;
		}

	#milieu > #bandeaux .textes p.contenu {
		margin:0; padding:0;
		max-width:600px;
		font-size:2.75rem; font-weight:600; line-height:1.11;
	}
		#milieu > #bandeaux .textes p.contenu > span {
			font-size:inherit; font-weight:inherit; line-height:inherit;
		}
			#milieu > #bandeaux .textes p.contenu > span > strong {
				font-size:1.1em; font-weight:700; color:#1D3FA0;
			}

	#milieu > #bandeaux .logo {
		position:absolute; bottom:40px; right:40px;
		display:block;
		width:175px; height:133px;
		background:url("/images/histoire/LOGO_LP_BLANC.png") no-repeat center center;
		background-size:contain;
	}

	#milieu > #bandeaux + .limite > .xbloc { margin-top:80px; }

/*#endregion Bandeaux*/


/*#region blocs*/

#milieu .xbloc,
#milieu .xbloc > * {
	font-size:1.1875rem; line-height:1.4; color:inherit;
}
#milieu .xbloc > h3, #milieu .xbloc > * > h3 {
	margin-bottom:1.875rem;
	font-size:1.5rem; font-weight:bold; color:inherit;
}
#milieu .xbloc > h4, #milieu .xbloc > * > h4 {
	margin-bottom:1.5rem;
	font-size:1.3125rem; font-weight:bold; color:inherit;
}


	/*#region histoire*/

	#milieu .xbloc.histoire {
		display:grid;
		grid-template-columns:460px 1fr; gap:28px;
		align-items:start;
		margin-top:40px; padding:0;
		min-height:0;
		background:none;
		color:#1d3fa0;
	}

		#milieu .xbloc.histoire .histoire-photo {
			min-height:407px;
			border-radius:12px;
			background:url("/images/histoire/HIS-PHO-01.png") no-repeat top left;
		}

		#milieu .xbloc.histoire .histoire-texte {
			padding: 30px 30px 30px 0;
			font-size:1.25rem;
		}

			#milieu .xbloc.histoire .histoire-texte h3 {
				margin:0 0 1.25rem 0;
				font-size:1.75rem;
			}

			#milieu .xbloc.histoire .histoire-texte p {
				margin:1em 0 0 0;
			}

	/* tablette */
	@media (max-width:980px) {
		#milieu .xbloc.histoire {
			grid-template-columns:1fr; gap:18px;
		}
		#milieu .xbloc.histoire .histoire-photo {
			width:100%; max-width:416px; height:407px;
			justify-self:start;
			background-size:auto; /* tant qu'on peut garder la taille native */
		}
		#milieu .xbloc.histoire .histoire-texte {
			margin:1.33em 0; padding:0;
		}
	}

	/* mobile */
	@media (max-width:680px) {
		#milieu .xbloc.histoire .histoire-photo {
			height:auto;
			aspect-ratio:416/407;
			background-size:contain; /* évite la coupe */
		}
	}

	/* mobile */
	@media (max-width:430px) {
		#milieu .xbloc.histoire .histoire-photo {
			width:100%; max-width:none;
			min-height:0;
			background-position:top left;
			background-size:contain;
			justify-self:center;
		}
	}

	/*#endregion histoire*/


	/*#region pourtous*/

	#milieu .xbloc.pourtous {
		background-color:#1D3FA0;
		color:white;
	}
		#milieu .xbloc.pourtous h3 {
			font-size:2.25rem;
		}
			#milieu .xbloc.pourtous h3 > strong {
				font-size:1.1em; font-weight:inherit; color:#FF914D;
			}
		#milieu .xbloc.pourtous h4 {
			font-size:1.8125rem;
			margin-left:6.97674418604651%;
		}
		#milieu .xbloc.pourtous div {
			display:table;
			margin-left:6.97674418604651%;
			font-size:1.25rem;
		}
			#milieu .xbloc.pourtous div > div {
				display:table-row;
			}
				#milieu .xbloc.pourtous div > div > span {
					display:table-cell;
					padding-top:1.5em;
					vertical-align:middle;
				}
				#milieu .xbloc.pourtous div > div > span:nth-child(1) {
					width:27%;
					font-size:1.05em; font-weight:bold; color:#E85A2C;
					text-align:right;
				}
				#milieu .xbloc.pourtous div > div > span:nth-child(2) {
					padding-left:1.85em; padding-right:1.85em;
					font-size:1.05em;
					text-align:center;
				}
				#milieu .xbloc.pourtous div > div > span:nth-child(2) {
					text-align:left;
				}

	/*#endregion pourtous*/


	/*#region infrastructures*/

	#milieu .xbloc.infrastructures {
		position:relative; z-index:0;
		padding:0; margin-bottom:40px;
		background-color:#f7f3ea;
		box-shadow:0 0 0 100vmax #f7f3ea; clip-path:inset(0 -100vmax);
	}

		#milieu .xbloc.infrastructures .infrastructures-wrap {
			padding:40px 25px;
			text-align:center;
		}

			#milieu .xbloc.infrastructures .surtitre {
				margin:0 0 18px 0;
				font-size:1.625rem; font-weight:700; line-height:1.1; color:#F05A24;
				text-transform:uppercase;
			}

			#milieu .xbloc.infrastructures h3 {
				margin:0 0 6px 0;
				font-size:3.125rem; font-weight:700; line-height:1.1; color:#1D3FA0;
			}

			#milieu .xbloc.infrastructures .intro {
				margin:0 auto 22px;
				max-width:900px;
				font-size:1.5625rem; font-weight:500; line-height:1.3; color:#1D3FA0;
			}

			#milieu .xbloc.infrastructures .cards {
				display:grid;
				grid-template-columns:repeat(3, minmax(0, 1fr));
				gap:22px;
			}

				#milieu .xbloc.infrastructures .card {
					padding:20px 22px;
					min-height:120px;
					border:1px solid #E4DED3; border-radius:16px;
					background:#FFFFFF;
					text-align:left;
				}

					#milieu .xbloc.infrastructures .card h4 {
						margin:0 0 4px 0;
						font-size:2.125rem; font-weight:700; line-height:1.2; color:#1D3FA0;
					}

					#milieu .xbloc.infrastructures .card p {
						margin:0;
						font-size:1.375rem; font-weight:400; line-height:1.35; color:#1D3FA0;
					}

	/* tablette */
	@media (max-width:980px) {
		#milieu .xbloc.infrastructures .cards {
			grid-template-columns:1fr;
		}
	}

	/* mobile */
	@media (max-width:680px) {
		#milieu .xbloc.infrastructures .infrastructures-wrap {
			padding:15px;
		}
		#milieu .xbloc.infrastructures .surtitre {
		}
		#milieu .xbloc.infrastructures h3 {
		}
		#milieu .xbloc.infrastructures .intro {
		}
		#milieu .xbloc.infrastructures .card h4 {
		}
		#milieu .xbloc.infrastructures .card p {
		}
	}

	/*#endregion infrastructures*/


	/*#region clubhouse*/

	#milieu .xbloc.clubhouse {
		padding:0; margin-top:40px;
	}

		#milieu .xbloc.clubhouse .clubhouse-wrap {
			padding:0px 24px 26px 24px;
			text-align:center;
		}

			#milieu .xbloc.clubhouse .surtitre {
				margin:0 0 18px 0;
				font-size:1.625rem; font-weight:700; line-height:1.1; color:#F05A24;
				text-transform:uppercase;
			}

			#milieu .xbloc.clubhouse h3 {
				margin:0 0 6px 0;
				font-size:3.125rem; font-weight:700; line-height:1.1; color:#1D3FA0;
			}

			#milieu .xbloc.clubhouse .intro {
				margin:0 auto 22px;
				max-width:900px;
				font-size:1.5625rem; font-weight:500; line-height:1.3; color:#1D3FA0;
			}

			#milieu .xbloc.clubhouse .cards {
				display:grid;
				grid-template-columns:repeat(3, minmax(0, 1fr));
				gap:22px;
			}

				#milieu .xbloc.clubhouse .card {
					position:relative;
					min-height:272px;
					border-radius:18px;
					background-color:#1D3FA0;
					background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0px, rgba(255,255,255,.07) 2px, transparent 2px, transparent 18px);
				}

				#milieu .xbloc.clubhouse .card {
					background:transparent none no-repeat center center;
					background-size:cover;
				}

				#milieu .xbloc.clubhouse .card.v1 { background-image:url("/images/histoire/his-clubhouse-terrasse.png"); }
				#milieu .xbloc.clubhouse .card.v2 { background-image:url("/images/histoire/his-clubhouse-snacking.png"); }
				#milieu .xbloc.clubhouse .card.v3 { background-image:url("/images/histoire/his-clubhouse-bar.png"); }

					#milieu .xbloc.clubhouse .card > span {
						position:absolute; left:50%; top:50%;
						transform:translate(-50%, -50%);
						display:inline-block;
						padding:10px 18px;
						border:none; border-radius:12px;
						background-color:rgba(29,63,160,.25);
						font-size:1.625rem; font-weight:600; line-height:1; color:#FFFFFF;
						white-space:nowrap;
					}

	/* tablette */
	@media (max-width:980px) {
		#milieu .xbloc.clubhouse .cards {
			grid-template-columns:1fr;
		}
		#milieu .xbloc.clubhouse .card {
			margin:0 auto;
			width:100%; max-width:400px;
			min-height:0; height:auto; aspect-ratio:400/272;
			background-size:cover;
		}
	}

	/* mobile */
	@media (max-width:680px) {
		#milieu .xbloc.clubhouse .clubhouse-wrap {
			padding:15px;
		}
		#milieu .xbloc.clubhouse .surtitre {
		}
		#milieu .xbloc.clubhouse h3 {
		}
		#milieu .xbloc.clubhouse .intro {
		}
		#milieu .xbloc.clubhouse .card {
			/*min-height:145px;*/
		}
		#milieu .xbloc.clubhouse .card > span {
			padding:8px 14px;
		}
	}

	/*#endregion clubhouse*/


	/*#region esprit*/

	#milieu .xbloc.esprit {
		background-color:#FFEED4;
		color:black;
		text-align:center;
	}
		#milieu .xbloc.esprit > h3 {
			margin:0 0 2rem 0;
			font-size:2.25rem; color:#1D3FA0;
			text-transform:uppercase;
		}
		#milieu .xbloc.esprit .esprit-cartes {
			display:grid;
			grid-template-columns:repeat(4, minmax(0, 1fr));
			gap:2.25rem 4.25rem;
			justify-items:center;
			text-align:center;
		}
			#milieu .xbloc.esprit .esprit-cartes > p {
				position:relative;
				margin:0 auto;
				padding-top:7.625rem;
				max-width:300px;
			}
			#milieu .xbloc.esprit .esprit-cartes > p::before {
				content:"";
				position:absolute; top:0; left:50%;
				width:130px; height:95px;
				transform:translateX(-50%);
				background:none no-repeat 50% 48%;
				background-size:250px 250px;
			}

			#milieu .xbloc.esprit .esprit-cartes > p:nth-of-type(1)::before { background-image:url("/images/histoire/his-esprit-accessibilite.svg"); }
			#milieu .xbloc.esprit .esprit-cartes > p:nth-of-type(2)::before { background-image:url("/images/histoire/his-esprit-convivialite.svg"); }
			#milieu .xbloc.esprit .esprit-cartes > p:nth-of-type(3)::before { background-image:url("/images/histoire/his-esprit-energie.svg"); }
			#milieu .xbloc.esprit .esprit-cartes > p:nth-of-type(4)::before { background-image:url("/images/histoire/his-esprit-experience.svg"); }

				#milieu .xbloc.esprit .esprit-cartes p > span {
					display:block;
					margin:0; padding:0;
					text-align:center;
				}
				#milieu .xbloc.esprit .esprit-cartes p > span:first-child {
					font-size:1.4375rem;
					margin-bottom:0.9rem;
					font-weight:bold; line-height:1.1; color:#E85A2C;
					text-transform:uppercase;
				}
				#milieu .xbloc.esprit .esprit-cartes p > span:last-child {
					font-size:1.1875rem;
					line-height:1.4;
					color:#1F1F1F;
				}

	@media (max-width:1200px) {
		#milieu .xbloc.esprit .esprit-cartes {
			grid-template-columns:repeat(2, minmax(0, 1fr));
		}
	}
	@media (max-width:700px) {
		#milieu .xbloc.esprit .esprit-cartes {
			grid-template-columns:1fr;
		}
	}

	/*#endregion esprit*/


	/*#region endroit*/

	#milieu .xbloc.endroit {
		padding:0;
	}
		#milieu .xbloc.endroit .endroit-grid {
			display:grid;
			margin:auto auto;
			max-width:1070px;
			grid-template-columns:repeat(2, minmax(0, 1fr));
			grid-template-areas:"photo1 titre" "desc photo2";
			gap:1.625rem;
		}
			#milieu .xbloc.endroit .case {
				min-height:400px;
				border-radius:1.25rem;
				overflow:hidden;
			}
			#milieu .xbloc.endroit .photo {
				background:no-repeat center center;
				background-size:cover;
			}
			#milieu .xbloc.endroit .photo1 {
				grid-area:photo1;
				background-image:url("/images/histoire/his-pho-02.png");
			}
			#milieu .xbloc.endroit .photo2 {
				grid-area:photo2;
				background-image:url("/images/histoire/his-pho-03.png");
			}
			#milieu .xbloc.endroit .texte {
				display:flex;
				padding:1.5rem;
				text-align:left;
			}
			#milieu .xbloc.endroit .ttitre {
				grid-area:titre;
				color:#163a97;
			}
				#milieu .xbloc.endroit .ttitre h3 {
					margin:0; max-width:410px;
					font-size:2.5rem; font-weight:bold; line-height:1.2; color:inherit;
					text-transform:uppercase;
				}
			#milieu .xbloc.endroit .tdescr {
				grid-area:desc;
				align-items:center; /* centrage vertical du <p> */
				background-color:#E85A2C; /* couleur bloc texte */
				color:white;
			}
				#milieu .xbloc.endroit .tdescr p {
					margin:0;
					font-size:1.5rem; font-weight:500; line-height:1.5; color:inherit;
				}

	@media (max-width:1200px) {
		#milieu .xbloc.endroit .case {
			min-height:280px;
		}
		#milieu .xbloc.endroit .ttitre h3 {
		}
		#milieu .xbloc.endroit .tdescr p {
		}
	}
	@media (max-width:900px) {
		#milieu .xbloc.endroit .endroit-grid {
			grid-template-columns:1fr;
			grid-template-areas:"photo1" "titre" "photo2" "desc";
		}
		#milieu .xbloc.endroit .case {
			min-height:240px;
		}
	}

	/*#endregion endroit*/

/*#endregion blocs*/
